<template>
  <div class="pro-list-item">
    <router-link :to="{name:'order',params:{id:product.id}}">
    <div class="item-wrap">
      <img :src="product.pic" alt="">
      <div class="item-info">
        <h2>{{product.title}}</h2>
        <span class="price">￥{{product.price}}</span>
       </div>
    </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'ListItem',
    props: ['product']
  }
</script>

<style lang="scss" scoped>
  .pro-list-item{
    background-color: #fff;
    width:47%;
    text-align: center;
    margin: 0 10px 20px 10px;
    border-radius: 4px;
    box-shadow: 0 6px 4px 0 rgba(0,0,0,.12); /*no*/
    .item-wrap{
      padding:2%;
      text-align: center;
      img{
        width: 345px;
        height:345px;
      }
    }
    .item-info{
      margin: 6% 0;
      h2{
        color:#333;
        font-size: 30px;/*px*/
      }
      span.price{
        color:#fb4700;
        font-size:28px;/*px*/
      }
    }
  }
</style>